<template>
  <div id="addActivity">
    <el-tabs v-model="pageShow" type="card" @tab-click="handleClick" class="tapBox">
      <!-- <el-tab-pane label="基本信息" name="INFO"></el-tab-pane>
      <el-tab-pane label="关联卡券" name="COUPON"></el-tab-pane>
      <el-tab-pane label="关联产品" name="PRODUCT"></el-tab-pane>
      <el-tab-pane label="活动参数" name="PARAM"></el-tab-pane> -->
      <el-tab-pane  v-for="items in options" :key="items"  :label="items=='INFO'?'基本信息':items=='COUPON'?'关联卡券':items=='PRODUCT'?'关联产品':'选择其他参数'" :name="items"></el-tab-pane>
    </el-tabs>
    <info    v-if="pageShow == 'INFO'" @changePageShow="changePageShow" :edit="edit"></info>
    <coupon  v-if="pageShow == 'COUPON'" @changePageShow="changePageShow" :edit="edit"></coupon>
    <product v-if="pageShow == 'PRODUCT'" @changePageShow="changePageShow" :edit="edit"></product>
    <parm    v-if="pageShow == 'PARAM'" @changePageShow="changePageShow" :edit="edit"></parm>
  </div>
</template>
<script>
import stepBtn from '../components/stepButton'
import info from '../components/info'
import coupon from '../components/coupon'
import product from '../components/product'
import parm from '../components/param'
import {activityDetail} from 'api/activity'
export default {
  components: {
    stepBtn, info, coupon, product, parm
  },
  data () {
    return {
      stepsArr: ['选择类型', '基本信息'],
      pageShow: '',
      actType: '',
      btnShow: {
        prev: false,
        save: false,
        next: true,
        success: false
      },
      edit: true,
      options: []
    }
  },
  created () {
    this.$emit('setTitleMsg', ['活动管理', '编辑'])
    // sessionStorage.setItem('activityId', 228)
    // sessionStorage.setItem('actStatus', 2)
    this.activityDetail()
  },
  //销毁前把活动类型信息删除
  beforeDestroy () {
    sessionStorage.removeItem('actType')
    sessionStorage.removeItem('activityId')
    sessionStorage.removeItem('actStatus')
  },
  methods: {
    async activityDetail () {
      try {
        let back = await activityDetail(sessionStorage.getItem('activityId'));
        back = back.data
        if (back.resultCode === '200') {
          let data = {
            text: back.result.info.typeText,
            type: back.result.info.type
          }
          this.options = back.result.relatedSectionsArray
          sessionStorage.setItem('actType', JSON.stringify(data))
          this.pageShow = 'INFO'
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    handleClick () {

    },
    changePageShow () {

    },
    // 根据选中的活动类型更换步骤条长度并把数据存在sessionStorage中
    changeStepArr (parm) {
      let arr = parm.relatedSectionsArray;
      this.actType = parm.name
      let stepArr = ['选择类型'];
      arr.forEach(element => {
        if (element === 'INFO') {
          stepArr.push('基本信息')
        }
        if (element === 'COUPON') {
          stepArr.push('选择卡券')
        }
        if (element === 'PRODUCT') {
          stepArr.push('选择产品')
        }
        if (element === 'PARAM') {
          stepArr.push('选择其他参数')
        }
      });
      this.stepsArr = stepArr;
      sessionStorage.setItem('addActivityType', JSON.stringify(parm));
      let data = {
        text: parm.value,
        type: parm.name
      }
      sessionStorage.setItem('actType', JSON.stringify(data))
    }
  }
}
</script>
<style lang="less" scoped>

</style>

